<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Charts</title>
<script src="../dom/__ns__.js"></script>
<script src="../formatters/__ns__.js"></script>
<script src="../formatters/NumberFormatter.js"></script>
<script src="../charts/__ns__.js"></script>
<script src="../charts/Tooltip.js"></script>
<script src="../charts/ChartAnimation.js"></script>
<script src="../charts/BaseChart.js"></script>
<script src="../charts/PieChart.js"></script>
<script src="../charts/DonutChart.js"></script>
<script src="../charts/HoopChart.js"></script>
<script src="__ns__.js"></script>
  

<!--script src="../../bin/jscodebase.js"></script-->

<script>
infographics.MobileDonutChart = function(container) {

  /**
   * The reference to HTML chart container.
   * @type {Element}
   */
  this.container = typeof container == 'string' ?
      dom.getElementById(container) : container;

  this.draw = function(data, opt_options) {
    self_.container.innerHTML = getTemplate_();
    var nodes = self_.container.childNodes;

    var chart = new charts.HoopChart(nodes[1]);
    chart.draw(data, opt_options);
    draw_(data, chart, chart.getOptions(opt_options));
  };

  function draw_(data, chart, options) {
    var colors = options['colors'];
    var columns = chart.getDataColumns(data);
    var rows = chart.getDataRows(data);
    var values = getValues_(rows);

    var inputs = dom.getElementsByTagName(self_.container, 'INPUT');
    for (var i = 0; i < inputs.length; i++) {
      inputs[i].style.color = colors[i];
      initCounter_(inputs[i], values[i] || 0);
      var icon = dom.getElementsByTagName(inputs[i].parentNode, 'DIV')[0];
      if (options['icons'][i]) {
        icon.style.background = colors[i] + ' url(' +
                                options['icons'][i] + ') 50% 50% no-repeat';
      }
      icon.style.opacity = inputs[i].style.opacity = options['opacity'];
    }
  }

  function getValues_(rows) {
    var first = 0;
    var last = 0;
    for (var i = 0; i < rows.length; i++) {
      var row = rows[i];
      first += row[0];
      last += row[row.length - 1];
    }

    first = 100 / (first + last) * first;
    last = 100 - first;
    return [first, last];
  }

  function initCounter_(input, max) {
    input = typeof input == 'string' ? document.getElementById(input) : input;
    var delay = 0;
    var step = max * 0.01;
    var timer = 0;
    var formatter = new formatters.NumberFormatter({'suffix': '%'});
    (function() {
      timer && clearTimeout(timer);
      var value = parseFloat(input.value || 0);
      if (value < max) {
        delay += value / max;
        input.value = formatter.round(value + step);
        timer = setTimeout(arguments.callee, delay);
      } else {
        input.value = formatter.round(max);
      }
    })();
  }

  function getTemplate_() {
    var width = self_.container.offsetWidth || 300;
    var height = self_.container.offsetHeight || width;
    // TODO (alex): calculate all sizes related to width and height.
    var attrs = 'style="float:left;font-size:42px;font-family:Arial;'+
                'width:' + (width / 3) + 'px;height:' + height + 'px"';
    var sides = 'margin:0 auto;height:151px;margin-top:55%;';
    var input = '<input style="margin:0 auto;display:block;border:0;' +
                'font-size:46px;width:140px;text-align:right" readonly>';
    var template = '' +
        '<div ' + attrs + '>' +
        '  <div style="'+sides+'width:104px"></div>' + input +
        '</div>' +
        '<div ' + attrs + '></div>' +
        '<div ' + attrs + '>' +
        '  <div style="'+sides+'width:148px"></div>' + input +
        '</div>';
    return template;
  }

  /**
   * The reference to current class instance. Used in private methods.
   * @type {!charts.BarChart}
   * @private
   */
  var self_ = this;
}

window.onload = function() {

  var options = {
    'icons': ['icon-mobile.png?aaa', 'icon-computer.png'],
    'donut': {'radius': 0.89}
  };

  var data = [
      ['Mobile', 'Computer'],
      [    1350,         50],
      [      12,       1130]
  ];
  (new infographics.MobileDonutChart('chart-container')).draw(data, options);
};
</script>
</head>
<body>

  <div id="chart-container" style="width:900px;height:500px"></div>

</body>
</html>